<template>
  <div class="film-wait-view">
    <div class="most-expected">
      <div class="bg">
        <div class="sp1">最受好评电影</div>
        <van-swipe
          class="swipe11"
          :loop="false"
          :show-indicators="false"
          :width="88"
          :height="160"
        >
          <van-swipe-item class="swipe1" v-for="item in good" :key="item.id">
            <img :src="`${item.img}`" alt="" />
            <div class="ss">
              <span class="sp2">{{ item.nm }}</span>
            </div>
            <div class="ri">{{ item.comingTitle }}</div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="main">
        <span class="sp4">8月19日 周五</span>
        <div>
          <div class="gd">
            <div class="yj" v-for="item in wait" :key="item.id">
              <div class="lefti">
                <img :src="`${item.img}`" />
              </div>
              <div class="rightti">
                <div class="xin">
                  <div class="b1">{{ item.nm }}</div>
                  <div>
                    <span class="s1">{{ item.wish }}</span
                    ><i>人想看</i>
                  </div>
                  <div class="b2">{{ item.star }}</div>
                  <div class="ds">
                    <span class="s2">{{ item.rt }}</span>
                  </div>
                </div>
                <div class="bu" v-if="item.showStateButton">
                  <van-button round type="info" size="small">{{
                    item.showStateButton.content
                  }}</van-button>
                </div>
                <div class="bu" v-else>
                  <van-button round v-bind:style="[a, b]" size="small"
                    >想看</van-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Swipe, SwipeItem } from "vant";
import { Button } from "vant";
export default {
  name: "FilmHotView",
  data() {
    return {
      wait: [],
      good: [],
      a: { color: "#fff" },
      b: { background: "#faaf00" },
    };
  },
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Button.name]: Button,
  },
  mounted() {
    axios
      .get(
        "/mmaoyan/ajax/comingList?ci=1&limit=10&movieIds=&token=&optimus_uuid=E706EFC01D6411ED80520DE9CDB9C65391EDFD7FF0584138B8561EE89520FE23&optimus_risk_level=71&optimus_code=10"
      )
      .then((data) => {
        this.wait.push(...data.data.coming);
        this.wait.forEach((item) => {
          console.log(item);
        });
      });
    axios
      .get(
        "/mmaoyan/ajax/mostExpected?limit=10&offset=0&token=&optimus_uuid=E706EFC01D6411ED80520DE9CDB9C65391EDFD7FF0584138B8561EE89520FE23&optimus_risk_level=71&optimus_code=10"
      )
      .then((data) => {
        this.good.push(...data.data.coming);
        this.good.forEach((item) => {
          console.log(item);
        });
      });
  },
};
</script>
<style scoped lang="scss">
.film-hot-view {
  flex: 1;
  overflow: auto;
}
.most-expected {
  background-color: #f5f5f5;
  .sp1 {
    font-size: 14px;
    color: #333;
    line-height: 21px;
    margin-bottom: 12px;
  }
  .bg {
    padding: 10px 15px;
    margin-bottom: 10px;
    background-color: #fff;
  }
  .swipe1 {
    padding-right: 9.8px;
  }

  img {
    width: 100%;
    height: 115px;
    padding-bottom: 4px;
  }
  .sp2 {
    font-size: 13px;
    color: #222;

    // margin-top: 5px;
    font-weight: 700;
  }
  .ri {
    font-size: 12px;
    color: #999;
  }
}
.main {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;

  background-color: #fff;

  .sp4 {
    font-size: 14px;
    color: #333;
    padding-top: 10px;
    margin-left: 10px;
  }
  .gd {
    padding: 12px 12px 0;
    margin-bottom: 60px;
  }

  .yj {
    display: flex;
    // flex-direction: column;
    margin-bottom: 14px;
    // justify-content: space-between;
    justify-content: space-between;
    .rightti {
      display: flex;
      align-items: center;
      width: 275px;
      justify-content: space-between;
      // justify-content: space-between;
      border-bottom: 1px solid #ccc;

      .xin {
        display: flex;
        flex-direction: column;
        line-height: 22px;
        // justify-content: space-between;
      }

      // .x1{
      //   margin-top: 10px;
      // }
      .ds {
        margin-bottom: 10px;
      }
      .b1 {
        font-size: 17px;
        color: #333;
        font-weight: 700;
      }
      .s1 {
        color: #faaf00;
        font-size: 15px;
        font-weight: 600;
      }
      i {
        font-size: 13px;
        margin-left: -2px;
        color: #666;
      }
      .b2 {
        font-size: 13px;
        color: #666;
      }
      .s2 {
        font-size: 13px;
        color: #666;
      }
    }
  }

  img {
    width: 64px;
    height: 90px;
  }
}
.van-button--small[data-v-10982598] {
  width: 52px;
  height: 30px;
  // margin: 25px 0 0 40px;
}
.ss {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 85px;
}
</style>
